<template>
	<view class="Row1">
	  	<navigator class="welcome flex--row" url="/pages/notice/notice">
	  		<image src="@/static/assist/bell.svg" class="icon--middle bell" aria-label="通知" :class="{'active':onNotice}"></image>
	  		<text> {{ message }} </text>
	  	</navigator>
	</view>
</template>

<script>
	import {NOTICE} from "@/core/constant/WebSocketEvent.js"
	import * as Role from "@/core/constant/role.js"
	import { checkRole } from "@/core/app"
	
	export default {
		data(){
			return {
				message:"暂时没有消息",
				onNotice:false,
				innerAudioContext:null,
			}
		},

		methods:{
			handleOnNotice(data){
				this.innerAudioContext.play()
				switch(checkRole()){
					case Role.ROLE_BLIND:
						if(data.type === 1){
							this.message = `出行预约成功。`
						}else if(data.type === 2){
							this.message = `有出行被拒绝了。`
						}
						break
					case Role.ROLE_VOLUNTEER:
						if(data.type === 1){
							this.message = `出行预约成功。`
						}else if(data.type === 2){
							this.message = `已拒绝对方请求。`
						}
				}
			
			},
			initBellNotice(){
				this.innerAudioContext = my.createInnerAudioContext ()
				this.innerAudioContext.src = "/static/xzhu/bell.mp3"
			}
		},
		mounted(){
			const app = this
			uni.$on(NOTICE,(data) => {
				app.handleOnNotice(data)
			})
			this.initBellNotice()
			
		},
	}
</script>

<style lang="scss" scoped>
	.Row1{
		width:100%;
		.welcome{
			justify-content: flex-start;
			align-items: center;
			text{
				line-height: 48px;
				vertical-align: top;
				font-size: 18px;
				font-weight: 700;
				color:#383838;
				
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow:hidden;
				
				width:240rpx;
			}
		}
	}
	
	.bell {
		&.active{
			animation:0.5s linear 6 alternate swing;
		}
	}
	
	@keyframes swing{
		from{
			transform: rotate(15deg);
		}
		
		to{
			transform: rotate(-15deg);
		}
	}
</style>